<template>
  <div>
      <el-header style="height: 60px;background-color: #000000;">
      <div>
        <span style="color: #ffffff;font-weight: bold;font-size: 30px;">南欧汽配之家</span>
      </div>
      <el-row>
        <i class="el-icon-question" style="font-size: 30px;padding-right: 20px;" @click="dialogVisible = true"></i>
        <el-button type="danger" round style="text-align: center;" @click="logout" >退出登录</el-button>
      </el-row>
    </el-header>

<!-- 帮助弹框 -->
 <el-dialog
   title="帮助"
   :visible.sync="dialogVisible"
   width="60%"
   :before-close="handleClose">
   <div class="title"><i class="el-icon-price-tag"></i>关于本站</div>
       <el-row>
        <el-col :span="18" :offset="3">
           <el-main>
            <el-card class="box">
                <p>
                  <el-tag type="success" effect="dark">功能</el-tag>
                  <br>
                    游客功能:用户可以在未登录时,查看首页,购物中心和关于项目的相关信息
                  <br>
                    用户功能：用户可登录系统可维护购买商品
                 <br>
                   游客功能:用户可以在未登录时,查看首页,购物中心和关于项目的相关信息
                 <br>
                   用户功能：用户可登录系统可维护购买商品
                 <br>
                   游客功能:用户可以在未登录时,查看首页,购物中心和关于项目的相关信息
                 <br>
                   用户功能：用户可登录系统可维护购买商品
                </p>
                <p>
                    <el-tag type="primary" effect="dark">优点</el-tag>
                </p>
                <p>
                    <el-tag type="warning" effect="dark">模块</el-tag>
                    本系统包含的模块：注册模块、登录模块、用户模块、管理员模块、供应商模块。
                </p>
                <!-- <el-image :src="about" fit="fit" style="width: 100%;height: 100%"></el-image> -->
            </el-card>
            </el-main>
        </el-col>
       </el-row>
   <span slot="footer" class="dialog-footer">
     <el-button @click="dialogVisible = false">取 消</el-button>
     <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
   </span>
 </el-dialog>

</div>
</template>

<script>
export default {
  name: 'TheHeader',

  data () {
    return {
      dialogVisible: false,
      activeIndex1: '1',
      activeIndex2: '2',
      activeIndex3: '3',
      activeIndex4: '4',
      item: [
        {
          name: '1',
          url: require('../../assets/images/1.jpg')
        },
        {
          name: '2',
          url: require('../../assets/images/2.jpg')
        }
      ]
    }
  },
  methods: {
    logout () {
      // 1.删除session中的数据
      window.sessionStorage.clear()
      // 2.用户访问登录页面
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
    /* top*/
  .el-header {
    background-color: rgb(43,42,50);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #FFFFFF;
    padding-left: 1px;

    >div {
      display: flex;
      align-items: center;

      span {
        margin-left: 15px;
        font-size: 25px;
      }
    }
  }
  .title{
      text-align: center;
      font-size: 30px;
      margin-top: 100px;
      font-family: "宋体";

  }

  .el-row{
      margin-bottom: 20px;
      margin-top: 15px;
  }
  .box{
      padding: 30px;
      background-image: url('../../assets/img/2.png') ;
      /*height: 600px;*/
  }
  .el-card {
      background-color: #EEEEEE;
      background-image: url('../../assets/img/2.png') ;
    }
  .box p{
      font-family: "宋体";
      font-size: 20px;
      line-height: 40px;
  }

</style>
